- 默认首页默认匹配

本节目标：理解“- 默认首页默认匹配”的核心思路，并能把它用于实际开发或面试表达。不一定“非要”加那条索引重定向，但你**必须给 “/” 一个落地**。有两条等价的最佳实践，二选一即可：

---
##

方案 A（保留 URL 为

 `/dashboard`

，更利于书签/面包屑）**在

 `root.children`

的最前面插入**一条“索引重定向”子路由。（其余不动）

```ts
//

复杂逻辑：命中 "/" 时，统一重定向到 dashboard，并“保留原始 query”（如 phone_verify=0）

\{
  path: '',
  name: '(public).index-redirect',
  redirect: (to) =\> (\{ name: '(public).dashboard', query: to.query \}),
  meta: \{ hideInMenu: true \}, //

不进菜单

\}


优点：`URL` 规范化到

/dashboard


；保留

?phone_verify=0


，你的弹窗逻辑照样触发。


**方案** `B`**（把**`“`**首页** `= Dashboard”`**，**`URL` **仍是**

/


**）**
`**`**用下面片段替换你现在的** `dashboard` **子路由**`**`（把它从

path: 'dashboard'


改为索引路由，并给一个别名）。

//

复杂逻辑：将 dashboard 设为“索引子路由”，并给绝对别名

 '/dashboard'
\{
  path: '',
  name: '(public).dashboard',
  component: () =\> import('@/views/(public)/dashboard/page.vue'),
  //

复杂逻辑：alias 让 '/dashboard' 也命中该记录（URL 使用别名时仍显示 '/dashboard'）

  alias: '/dashboard',
  meta: \{\},
\}


注意：采用本方案时，`**`**删除你原先的**

{ path: 'dashboard', ... }**


，避免重复定义路由记录。


优点：访问

/


直接渲染 `Dashboard`，不产生一次额外跳转；同样保留 `query`，不影响

phone_verify


弹窗。


**该选哪个？**


你希望`“URL` 统一到

/dashboard”→


选`**`**方案** `A**`。


你希望`“`主页就是

/


显示 `dashboard”→` 选`**`**方案** `B**`（更简洁，不跳转）。
以上片段按需`**`**插入**`/`**替换**`**`即可，其他位置都不用动。

- 默认首页 默认匹配 ​

​

​

- 默认首页默认匹配